import React, { useState, useRef, useEffect } from 'react'
import * as echarts from 'echarts';
import axios from 'axios';
export default function ProductStateManage() {
  const pieRef = useRef()
  const [pieChart, setPieChart] = useState(null)
  const pieRef1 = useRef()
  const [pieChart1, setPieChart1] = useState(null)
  const lineRef = useRef()
  const [lineChart, setLineChart] = useState(null)
  useEffect(() => {
    axios.get("/sale/overallproduction").then(res => {
      buildPieChart(res.data, 1)
    })
    axios.get("/sale/todayproduction").then(res => {
      buildPieChart(res.data, 2)
    })
    axios.get("/sale/sevendayproduction").then(res => {
      console.log(res.data);
      line(res.data)
    })
  }, [])
  const buildPieChart = (pieData, type) => {
    var myChart
    if (type === 1) {
      if (!pieChart) {
        myChart = echarts.init(pieRef.current);
        setPieChart(myChart)
      } else {
        myChart = pieChart
      }
    } else {
      if (!pieChart1) {
        myChart = echarts.init(pieRef1.current);
        setPieChart1(myChart)
      } else {
        myChart = pieChart1
      }
    }

    window.addEventListener('resize', function () {
      myChart.resize();
    });
    myChart.setOption({
      title: {
        text: type === 1 ? '总体生产情况' : "当日生产情况",
        left: 'center',
      },
      tooltip: {
        trigger: 'item'
      },
      grid: {
        right: '5%',
        bottom: '10%',
        top: "20%",
        left: "10%"
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '数量',
          type: 'pie',
          radius: '50%',
          data: pieData,
          top: "-10%",
          bottom: "-20%",
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    })
  }
  // const bar = (datas) => {
  //   var myChart
  //   if (!barChart) {
  //     myChart = echarts.init(barRef.current);
  //     setBarChart(myChart)
  //   } else {
  //     myChart = barChart
  //   }
  //   window.addEventListener('resize', function () {
  //     myChart.resize();
  //   });

  //   myChart.setOption({
  //     tooltip: {
  //       trigger: 'axis',
  //       axisPointer: {
  //         type: 'line',

  //       },
  //       //valueFormatter: (value) => value + "%"
  //     },
  //     grid: {
  //       right: '3%',
  //       bottom: '10%',
  //       top: "7%"
  //     },
  //     xAxis: {
  //       type: 'category',
  //       data: datas.datax,
  //       axisTick: { show: false },
  //     },
  //     yAxis: {
  //       type: 'value',
  //       min: 0,
  //       max: 10,
  //       splitLine: {
  //         lineStyle: {
  //           type: 'dashed'//虚线
  //         },
  //         show: true //隐藏
  //       }
  //     },
  //     series: [
  //       {
  //         name: '管理单位物联体系建设应用率:',
  //         type: 'bar',
  //         data: datas.datay,
  //         barWidth: "45%",
  //         itemStyle: {
  //           borderRadius: 5,
  //           width: 20,
  //           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  //             { offset: 0, color: '#188df0' },

  //             { offset: 1, color: '#83bff6' }
  //           ])
  //         },
  //       }
  //     ]
  //   })
  // }
  const line = (datas) => {
    var myChart
    if (!lineChart) {
      myChart = echarts.init(lineRef.current);
      setLineChart(myChart)
    } else {
      myChart = lineChart
    }
    window.addEventListener('resize', function () {
      myChart.resize();
    });

    myChart.setOption({

      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line',

        },
        //valueFormatter: (value) => value + "%"
      },
      grid: {
        right: '3%',
        left: "3%",
        bottom: '10%',
        top: "3%"
      },
      xAxis: {
        type: 'category',
        data: datas.datax,
        axisTick: { show: false },
        boundaryGap: false
      },
      yAxis: {
        type: 'value',
        min: 0,
        max: Math.max(...datas.datay),//((Math.max(...datas.datay) / 10) + 1) * 10,
        splitLine: {
          lineStyle: {
            type: 'dashed'//虚线
          },
          show: true //隐藏
        }
      },
      series: [
        {
          name: '数量:',
          type: 'line',
          showSymbol: false,
          data: datas.datay,
          lineStyle: {
            color: "#188df0"
          },
          areaStyle: {
            // shadowBlur: 20,  //阴影
            // origin: "start",
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(126, 192, 247, 0.2)'
            },
            {
              offset: 0.5,
              color: 'white'
            }]) // 区域线条渐变色
          }
        }
      ]
    })
  }
  return (
    <div>
      <div style={{ height: "350px", display: "flex", background: "#f5f4f4" }}>
        <div style={{ flex: "1 1 200px", border: "1px soild gray", background: 'white', borderRadius: '10px', margin: "10px 5px 10px 0" }}>
          <div style={{ height: "15%", lineHeight: '10%', padding: '20px 10px 0 10px' }}>总体生产（已生产、未生产、生产中）情况饼图</div>
          <div ref={pieRef} style={{ width: "100%", height: "85%", padding: "0 5%" }} ></div>
        </div>
        <div style={{ flex: "1 1 200px", border: "1px soild gray", background: 'white', borderRadius: '10px', margin: "10px 5px 10px 0" }}>
          <div style={{ height: "15%", lineHeight: '10%', padding: '20px 10px 0 10px' }}>当日生产（已生产、未生产、生产中）情况饼图</div>
          <div ref={pieRef1} style={{ width: "100%", height: "80%", padding: "0 5%" }} ></div>
        </div>
      </div>
      <div style={{ width: "100%", height: "400px" }}>
        <div style={{ height: "20%", lineHeight: '20%', padding: '20px 10px' }}>过去七天生产完成数量
        </div>
        <div ref={lineRef} style={{ width: "100%", height: "80%", padding: "0 5%" }} >

        </div>
      </div>

    </div >
  )
}
